<template>
  <a-tabs v-model:activeKey="activeKey" style="background-color: #fff">
    <a-tab-pane key="0" tab="监理规划">
      <pro-table
        ref="tableRef1"
        :columns="columnsOne"
        :fetch="fetch"
        :toolbar="toolbar"
        :param="activeKey"
        :operate="operate"
      ></pro-table
    ></a-tab-pane>
    <a-tab-pane key="1" tab="监理月报" force-render>
      <pro-table
        ref="tableRef2"
        :columns="columnsTwo"
        :fetch="fetch"
        :toolbar="toolbar"
        :param="activeKey"
        :operate="operate"
      ></pro-table
    ></a-tab-pane>
    <a-tab-pane key="2" tab="专项报告">
      <pro-table
        ref="tableRef3"
        :columns="columnsThree"
        :fetch="fetch"
        :toolbar="toolbar"
        :operate="operate"
        :param="activeKey"
      ></pro-table
    ></a-tab-pane>
  </a-tabs>

  <SupervisionDia
    ref="diaRef"
    :visible="isVisible"
    @close="closeDia"
    :activeKey="activeKey"
    :editData="editData"
  ></SupervisionDia>
</template>

<script setup>
import global from "../../global/global.vue";
import { ref } from "vue";
import SupervisionDia from "./components/SupervisionDia.vue";
import { getJlgzList } from "@/api/module/constructAndImplement";
import moment from "moment";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal, message } from "ant-design-vue";

// 项目id
const projectId = global.xmid;

const tableRef1 = ref();
const tableRef2 = ref();
const tableRef3 = ref();
const isVisible = ref(false);
const closeDia = function () {
  isVisible.value = false;
  tableRef1.value?.reload();
  tableRef2.value?.reload();
  tableRef3.value?.reload();
};

// 表单规则
// 监理规划
const columnsOne = ref([
  {
    title: "序号",
    align: "center",
    customRender: ({ text, record, index }) => index + 1,
    width: 60,
  },
  { dataIndex: "time", title: "时间", align: "center" },
  {
    dataIndex: "fileName",
    title: "监理规划",
    align: "center",
    document: "fileName",
    domainName: "/api/project/constructionImplementation/jlgzDownload",
    documentId: "file",
  },
  {
    dataIndex: "remark",
    title: "备注",
    align: "center",
  },
]);
// 监理月报
const columnsTwo = ref([
  {
    title: "序号",
    align: "center",
    customRender: ({ text, record, index }) => index + 1,
    width: 60,
  },
  { dataIndex: "ybTime", title: "时间", align: "center" },
  {
    dataIndex: "fileName",
    title: "监理月报",
    align: "center",
    document: "fileName",
    domainName: "/api/project/constructionImplementation/jlgzDownload",
    documentId: "file",
  },
  {
    dataIndex: "remark",
    title: "备注",
    align: "center",
  },
]);
// 专项报告
const columnsThree = ref([
  {
    title: "序号",
    align: "center",
    customRender: ({ text, record, index }) => index + 1,
    width: 60,
  },
  { dataIndex: "time", title: "时间", align: "center" },
  {
    dataIndex: "fileName",
    title: "专项报告",
    align: "center",
    document: "fileName",
    domainName: "/api/project/constructionImplementation/jlgzDownload",
    documentId: "file",
  },
  {
    dataIndex: "remark",
    title: "备注",
    align: "center",
  },
]);

// 表单数据
const fetch = async () => {
  const res = await getJlgzList({ id: projectId, type: activeKey.value });
  return {
    data: res.data,
  };
};

// tab标识，表格标识
const activeKey = ref("0");

/// 工具栏
const diaRef = ref();
const toolbar = [
  {
    label: "新增",
    event: function () {
      editData.value = {
        remark: "",
        ybTime: moment(new Date()).format("YYYY-MM"),
        time: moment(new Date()).format("YYYY-MM-DD"),
      };
      isVisible.value = true;
    },
  },
];

const editData = ref();
/// 行操作
const operate = [
  {
    label: "编辑",
    event: function (record) {
      console.log(record);
      editData.value = record;
      editData.value.ybTime = moment(new Date()).format("YYYY-MM");
      editData.value.time = moment(new Date()).format("YYYY-MM-DD");
      isVisible.value = true;
    },
  },
  {
    label: "删除",
    event: function (record) {
      console.log(record.id);
      // 展示确认弹窗
      Modal.confirm({
        title: () => "温馨提示",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "确认删除吗？",
        onOk() {
          // 调用删除接口
          // 重新获取数据
          tableRef1.value?.reload();
          tableRef2.value?.reload();
          tableRef3.value?.reload();
          message.success("删除成功");
        },
        onCancel() {},
      });
    },
  },
];
</script>

<style lang="scss" scoped></style>
